<template>
	<view>
		<!-- 收银台 -->
			<NavTitle titleKey="commonTitle.收银台" />
		<view class="edgeInsetTop"></view>
		<view class="wanl-pay">
			<view class="money bg-white">
				<text class="title">{{$t('pages.shop.付款金额')}}</text>
				<view class="margin-top price">
					<view class="symbol">
						<text>￥</text>
					</view>
					<input type="digit" maxlength="5" focus v-model="money"/>
					<view class="text-lg wanl-gray-light" @tap="emptyInput" v-if="money">
						<text class="wlIcon-shibai"></text>
					</view>
				</view>
			</view>
			<view class="list-box">
				<view class="item" v-for="(item, index) in payList" :key="index">
					<text :class="'wlIcon-'+ item.type"></text>
					<view class="action">
						<text class="title wanl-pip">{{item.name}}</text>
						<view>{{item.describe}}</view>
					</view>
					<view class="radio text-xxl" v-if="item.state" @tap="onSelect(index)">
						<text v-if="item.select" class="wlIcon-xuanze-danxuan wanl-orange"></text>
						<text v-else class="wlIcon-xuanze wanl-gray-light"></text>
					</view>
					<view class="radio text-xxl" v-else>
						<text class="wlIcon-xuanze-danxuan wanl-gray-light"></text>
					</view>
				</view>
			</view>
			<button class="mix-btn wanl-bg-redorange" @tap="confirm()" :loading="loading"> {{$t('pages.user.collect.付款')}}</button>
			<!-- <view class="footer text-center">
				<view> © 万联支付 </view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				disabled: false,
				money: null,
				payList: [],
				invite_code:0,
			}
		},
		onLoad(query) {
			if(!query.invite_code){
				this.$wanlshop.msg(this.$t('message.服务器繁忙'));
				return;
			}
			this.payList.push({
				name: '余额',
				describe: '',
				type: 'balance-pay',
				pay_type:'balance',
				invite_code:query.invite_code,
				state: true,
				select: true
			}, {
				name: '钱包',
				describe: '',
				type: 'qianbao-',
				pay_type:'wallet',
				invite_code:query.invite_code,
				state: true,
				select: false
			},
			{
				name: '银行卡',
				describe: '',
				type: '31huiyuanqia',
				pay_type:'bank',
				invite_code:query.invite_code,
				state: true,
				select: false
			},
			);
		},
		methods: {
			//确认支付
			confirm() {
				let data = null;
				if (this.disabled) {
					return;
				}
				if(this.money <= 0){
					this.$wanlshop.msg(this.$t('pages.user.money.请输入'));
					return;
				}
				this.payList.map((value,index,array) => {
				　　if(value.select){
						data = value;
					}else{
						return;
					}
				});
				// 判断支付是否存在
				if (!data) {
					this.$wanlshop.msg(this.$t('pages.user.money.请选择支付方式'));
					return;
				}else{
					if(data.pay_type === 'wallet' || data.pay_type === 'balance'){
						if(!this.$store.state.user.isLogin){
							this.$wanlshop.msg(this.$t('pages.user.未登录'));
							this.$wanlshop.to('/pages/user/auth/auth');
							return;
						}
					}
					this.wanlPay(data);
				}
				
			},
			async wanlPay(data, code = null){
				await uni.request({
					url: '/wanlshop/pay/shopPayment',
					method: 'POST',
					data: {
						pay_type: data.pay_type,
						money: this.money,
						invite_code:data.invite_code
					},
					success: res => {
						this.$wanlshop.msg(res.msg);
						if(res.data.web_url){
							location.href=res.data.web_url;
							return;
						}
						// 
						 this.money = null;
						return;
					}
				});
			},
			onSelect(key){
				this.payList.map((value,index,array) => {
				　　if(index == key){
						value.select = !value.select;
					}else{
						value.select = false;
					}
				});
			},
			emptyInput(){
				this.money = null;
			},
			// 支付成功
			paySuccess(){
				this.loading = false;
				this.$store.commit('user/setUserInfo', {
					money: this.$wanlshop.bcadd(this.$store.state.user.money, this.money)
				});
				this.$wanlshop.to('/pages/page/success?type=recharge');
			}
		}
	}
</script>

<style>
	radio-group {
	    display: block;
	}
	.wanl-pay .money{
		padding: 25rpx 40rpx 25rpx 60rpx;
	}
	
	.wanl-pay .money .symbol{
		font-size: 60rpx;
		margin-right: 20rpx;
	}
	
	.wanl-pay .money .price{
		display: flex;
		align-items: center;
	}
	.wanl-pay .money .price input{
		/* #ifdef MP */
		height: 100rpx;
		min-height: 100rpx;
		/* #endif */
		width: 100%;
		font-size: 100rpx;
	}
</style>
